<template>
  <div>
    <van-empty description="快来买茶叶吧" v-if="!cararr.length" />
    <div v-else class="car">
      <van-cell-group v-if="address">
        <van-cell   :title="address.name+'  '+address.tel"  :label="address.address" >
          <template #right-icon>
            <!-- <van-icon  name="search" class="search-icon" /> -->
            <van-icon @click="openSeladdressPopup=true" :size="20" name="edit" />
          </template>
        </van-cell>
      </van-cell-group>
       <van-checkbox-group v-model="payarr">
        <van-checkbox @click="checked=payarr.length==cararr.length" checked-color="green" style="margin-top:5px" :name="v" v-for="v,k in cararr" :key="v.tid">
          <van-swipe-cell>
           <van-card
              @click-thumb.stop="$router.push('/det?tid='+v.tid)"
              :price="v.price+'.00'"
              :title="v.tname"
              :thumb="v.timg"
            >
            <template #footer>
             <div @click.stop>
              <van-stepper 
              v-model="v.pnum" 
              theme="round" 
              button-size="22" 
              @change="change"
              disable-input />
             </div>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" @click="del(v,k)" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
         
        </van-checkbox>
       
      </van-checkbox-group>
    </div>

    <van-submit-bar v-if="cararr.length" :price="total_price*100" button-text="提交订单" @submit="onSubmit">
    <van-checkbox checked-color="green" @click="checkAll"  v-model="checked">全选</van-checkbox>
    <!-- <template #tip>
      你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
    </template> -->
  </van-submit-bar>
<van-popup v-model="openSeladdressPopup" position="bottom" :style="{ height: '70%' }" >
           <van-address-list
          v-model="chosenAddressId"
          :list="addrList"
       
          default-tag-text="默认"
         
        />
        </van-popup>

    
  </div>
</template>
<script>
import { Toast } from 'vant';
import {set,get} from "@/utils/local"
import {Order} from "@/utils/api"
export default {
  
  name:'car',
  data() {
    let addrList=get("addr")||[]// 获取收货地址
    let chosenAddressId=addrList.find(v=>v.isDefault)?.id// 默认选中默认收货地址
    
    return {
       cararr:[],
       payarr:[],
       checked:false,
       show:false,
       addrList,// 收货地址列表
       chosenAddressId,
       address:{},// 收货地址
       openSeladdressPopup:false,// 修改地址抽屉
    }
  },
  mounted(){
     this.getCar()
     this.selAddress()
  },
  // 缓存生命周期函数
  // 进入页面
  activated(){
      // console.log("进入页面");
      this.getCar()
      // 在新的购物车内找到 原先存在payarr数组内的商品 找到之后重新赋值给payarr
      // console.log(this.payarr);

      let arr=[]// 存购物车内存在payarr内的商品

      this.cararr.map(v=>{
        // v 购物车每一条商品 是否存在payarr中
        let t=this.payarr.some(it=>it.tid==v.tid)
        if(t){
           arr.push(v)
        }
      })
      // console.log(arr);
      this.payarr=arr

      this.selAddress()

  },
  computed:{
      total_price(){
        let total=0
        this.payarr.map(v=>{
          total+=v.pnum*v.price
        })
        // payarr  复选控制payarr 的长度 
        // payarr 的长度 控制了全选的状态
        // this.checked=this.payarr.length==this.cararr.length
        
        return total
      }
  },
  methods:{
      getCar(){
          this.cararr=get("car")||[]
      },
     change(){
        // console.log(this.cararr);
        set("car",this.cararr)
     },
     del(v,k){
        // console.log(v);
        this.cararr.splice(k,1)
        set("car",this.cararr)
         this.payarr=this.payarr.filter(it=>it.tid!=v.tid)
        this.checked=this.payarr.length==this.cararr.length
        // this.checked=this.payarr.length!=0// 删除所有 全选取消
        // console.log(this.payarr);
        if(this.cararr.length==0&&this.payarr.length==0){// 删除所有 全选取消
          this.checked=false
        }


     },
     onSubmit(){// 提交订单
        //  console.log(666);
        // 判断是否登录
        console.log(this.total_price);
        if(!this.total_price){
          // Notify({ type: 'warning', message: '通知内容' });
          // alert(66666)
          // this.show=true
          Toast.fail('请勾选茶叶');
          return

        }
        
        let userinfo=get("userinfo")// 获取用户信息
        // let address=get("addr")// 获取收货地址
        console.log(userinfo);
        if(!userinfo){
          this.$router.push("/login")
          return
        }
        if(!this.addrList.length){
          this.$router.push("/addr")
           return
        }

        // 组装买单参数
        // 组装商品参数
         let goods=this.payarr.map(v=>{
            let obj={...v}// 深拷贝 
            delete obj.timg
            return obj
         })

         goods=JSON.stringify(goods)
        // 健壮性
        let params={
           // 1.收货地址参数
           user:this.address.name,
           tel:this.address.tel,
           address:this.address.address,
           // 用户uid
           uid:userinfo.uid,
           // 总价
           total_price:this.total_price,
           // 商品
           goods
        }

        // console.log(params);
       

        // return
          Order(params)
          .then(res=>{
            console.log(res);
            if(res.code==200){
                      // 到购物车内序号结算的商品 删掉
                this.payarr.map(v=>{
                    this.cararr=this.cararr.filter(it=>it.tid!=v.tid)
                })
                this.payarr=[]
                // console.log(this.cararr);
                this.checked=this.payarr.length==this.cararr.length
                // this.checked=this.payarr.length!=0// 删除所有 全选取消
                // console.log(this.payarr);
                if(this.cararr.length==0&&this.payarr.length==0){// 删除所有 全选取消
                  this.checked=false
                }
                // 更新本地存储
                set("car",this.cararr)
            }
          })
     },
     checkAll(){// 点击的时候执行
        // console.log(this.checked);
        this.payarr=this.checked?this.cararr:[]
     },
     selAddress(){// 选择收货地址
        this.address=this.addrList.find(v=>v.id==this.chosenAddressId)// 未找到 undefined
        console.log(this.chosenAddressId);
        console.log(this.addrList);
        this.openSeladdressPopup=false
     }
  },
  watch:{
      // checked(n){// 值发生改变就执行
      //   console.log(n);
      //   n// 全选的选中 不选中 
      //   // 选中 n true 购物车内的商品都要结算 
      //   // 没选中 n flase 结算的商品为空 
      
      //   this.payarr=n?this.cararr:[]
      // }
      chosenAddressId(n){
        //  console.log(n);
        this.selAddress()
      }
  }
}
</script>
<style scoped>
.car{
  padding: 5px;
}
.car >>> .van-checkbox__label{
  display: block;
  width: 100%;
}
.car >>> .van-stepper--round .van-stepper__minus {
    color: green;
    background-color: #fff;
    border: 1px solid green;
}
.car >>> .van-stepper--round .van-stepper__plus {
    color: #fff;
    background-color: green;
}
 .delete-button {
    height: 100%;
    /* background: green; */
  }
  .van-submit-bar{
    bottom: 50px;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  .van-address-list__bottom{
    display: none;
  }
  .van-address-item__edit{
    display: none;
  }
</style>
